<!--
 * @Description: 基础布局
 * @Author: chaizhou
 * @Date: 2023-02-17 09:23:59
 * @LastEditTime: 2023-02-28 14:29:07
-->
<template>
  <el-container class="rootWrap">
    <el-aside class="asideWrap">
      <Menu :data="formatMenu()" text-color="#FFFFFF" background-color="#122A88" active-color="#FFFFFF" unique-opened router />
    </el-aside>
    <el-container class="contentWrap">
      <el-header class="headerWrap">
        <span class="sysName">{{ title }}</span>
        <DropDown />
      </el-header>
      <el-main id="main" class="mainWrap">
        <RouterView />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { watch, ref } from 'vue'
import Menu from './Menu.vue'
import DropDown from '@/components/DropDown'
import { RouterView } from 'vue-router'
import { formatMenu } from '@/router'
import { useRouter } from 'vue-router'
const title = ref('')
const router = useRouter()

watch(
  () => router.currentRoute.value.meta.title,
  (val) => {
    title.value = val
  },
  { immediate: true, deep: true }
)
</script>

<style lang="less" scoped>
.rootWrap {
  .contentWrap {
    overflow: auto;
    .headerWrap {
      height: 56px;
      background: #ffffff;
      box-shadow: 0 2px 6px 0 rgba(0, 21, 41, 0.1);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      min-width: 800px;
      .sysName {
        color: #383635;
        font-size: 20px;
        font-weight: 600;
      }
    }
    .mainWrap {
      min-width: 800px;
    }
  }
  .asideWrap {
    width: 200px;
  }
}
</style>
